<template>
  <el-dialog
    v-model="visible"
    :title="!dataForm.id ? $t('admin.add') : $t('user.editBtn')"
    :close-on-click-modal="false"
    top="5vh"
    width="780px"
    @close="dialogClose"
  >
    <el-form
      ref="dataFormRef"
      class="dialog-form"
      :model="dataForm"
      :rules="dataRule"
      :label-width="$t('language') === 'language' ? '150px' : '80px'"
      @submit.prevent
      @keyup.enter="onSubmit(dataFormRef)"
    >
      <el-form-item
        :label="$t('imMsgBizSkills.keyword')"
        prop="keywords"
      >
        <el-input
          v-model="dataForm.keywords"
          maxlength="20"
        />
      </el-form-item>
      <el-form-item
        :label="$t('imMsgBizSkills.content')"
        prop="content"
      >
        <el-input
          v-model="dataForm.content"
          class="content"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          maxlength="1000"
        />
      </el-form-item>
      <el-form-item
        :label="$t('crud.remark')"
        prop="remark"
      >
        <el-input
          v-model="dataForm.remark"
          type="textarea"
          maxlength="100"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="visible = false"
        >
          {{ $t("chat.cancel") }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="onSubmit(dataFormRef)"
        >
          {{ $t("chat.confirm") }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const emit = defineEmits(['refreshDataList'])
const dataFormRef = ref(null)

const visible = ref(false)
const dataForm = ref({
  id: null,
  keywords: '',
  content: '',
  remark: null
})
const isSubmit = ref(false)

// eslint-disable-next-line no-unused-vars
const validateKeywords = (rule, value, callback) => {
  if (String(value).trim() === '') {
    callback(new Error($t('imMsgBizSkills.keyword') + $t('publics.noNull')))
  } else {
    callback()
  }
}

const dataRule = {
  keywords: [
    { required: true, message: $t('imMsgBizSkills.keyword') + $t('publics.noNull'), trigger: 'blur' },
    { validator: validateKeywords, trigger: 'blur' }
  ],
  content: [
    { required: true, message: $t('imMsgBizSkills.content') + $t('publics.noNull'), trigger: 'blur' }
  ]
}

// 表单提交
const onSubmit = async formEl => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (!valid) return
    if (isSubmit.value) return false
    const obj = JSON.parse(JSON.stringify(dataForm.value))
    if (!obj.id) {
      delete obj.id
    }
    isSubmit.value = true
    http({
      url: http.adornUrl('/admin/imMsgBizSkills'),
      method: dataForm.value.id ? 'put' : 'post',
      data: http.adornData(obj)
    }).then(() => {
      ElMessage({
        message: $t('publics.operation'),
        type: 'success',
        duration: 1500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
          dataForm.value.content = ''
        }
      })
    }).catch(() => {
      isSubmit.value = false
    })
  })
}

// 重置表单
const dialogClose = () => {
  nextTick(() => {
    dataFormRef.value?.resetFields()
  })
}

const init = (id = null) => {
  dataForm.value.id = id || ''
  visible.value = true
  dialogClose()
  isSubmit.value = false
  if (dataForm.value.id) {
    http({
      url: http.adornUrl('/admin/imMsgBizSkills/info/' + id),
      method: 'get',
      params: http.adornParams()
    }).then(({ data }) => {
      dataForm.value = data
    })
  }
}

defineExpose({ init })

</script>

<style lang="scss" scoped>
.dialog-form {
  :deep(.el-form-item) {
    margin-bottom: 4px;
  }
  :deep(.el-form-item.is-error) {
    margin-bottom: 22px;
  }
  .content{
    padding-top:5px;
    padding-bottom: 5px;
  }
}
</style>
